<template>
    <div>
        <Row>
            <Col span="24" class="pt10 pb10 pl10">
                    <Form inline>
                        <FormItem style="margin-bottom: 0">
                            <Select v-model="searchConf.status" clearable placeholder='请选择状态' style="width:100px">
                                <Option :value="1">启用</Option>
                                <Option :value="0">禁用</Option>
                            </Select>
                        </FormItem>
                        <FormItem style="margin-bottom: 0">
                            <Input v-model="searchConf.username" placeholder=""></Input>
                        </FormItem>
                        <FormItem style="margin-bottom: 0">
                            <Button type="primary" @click="search" icon="android-search">查询</Button>
                            <Button type="success" @click="doModel" icon="plus-round">新增</Button>
                        </FormItem>
                    </Form>
            </Col>
        </Row>

        <Row>
            <Col span="24">
                    <div>
                        <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="mt20" style="text-align: center">
                        <Page :total="searchConf.total" :current="searchConf.currentPage" size="small"
                              :page-size="searchConf.pageSize" @on-change="changePage"
                              @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel"> 
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{formItem.id ? '编辑' : '新增'}}用户</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">{{formItem}}
                <FormItem label="用户账号" prop="username">
                    <Input v-model="formItem.username" placeholder="请输入账号"></Input>
                </FormItem>
                <FormItem label="用户密码" prop="password">
                    <Input v-model="formItem.password" type="password" placeholder="用户密码"></Input>
                    <p>为空不修改原始密码</p>
                </FormItem>
                <FormItem label="所属角色" prop="roleId">
                    <Select v-model="formItem.roleId" filterable>
                        <Option :value="0">请选择</Option>
                        <Option v-for="item in authData" :value="item.id" :key="item.id">{{ item.roleName }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="doModel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {usersColumns} from '@/lib/columns'
import {userSave} from '@/validate/users'

    export default {
        name: 'system_user',
        data () {
            return {
                columnsList: usersColumns,
                tableData: [], //获取数据列表
                authData:[],
                searchConf: {
                    pages: 1,
                    sizes:0,
                    total: 0
                },
                modalSetting: {
                    show: false,
                    loading: false,
                    index: 0
                },
                formItem: {
                    role_id:0,
                    username: '',
                    nickname: '',
                    password: '',
                    groupId: [],
                    id: 0
                },
                ruleValidate: userSave
            };
        },
        created () {
            this.searchConf.sizes = this.$store.state.sizes;
            this.init();
            this.getList();
            this.getAuthList();
        },
        methods: {
            init () {
                let vm = this;
                this.columnsList.forEach(item => {
                    if (item.handle) {
                        item.render = (h, param) => {
                            let currentRowData = vm.tableData[param.index];
                            return h('div', [
                                this.editButton(vm, h, currentRowData, param.index),
                                this.deleteButton(vm, h, currentRowData, param.index)
                            ]);
                        };
                    }
                    if (item.key === 'status') {
                        item.render = (h, param) => {
                            let currentRowData = vm.tableData[param.index];
                            return h('div', [
                                this.updateSwitch(vm, h, currentRowData, param.index)
                            ]);
                            
                        };  
                    }
                });
            },
            //编辑
            editButton (vm, h, currentRow, index) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size:'small'
                    },
                    style: {
                        margin: '0 5px'
                    },
                    on: {
                        'click': () => {
                            console.log(currentRow);
                            delete currentRow.password
                            Object.assign(vm.formItem,currentRow);
                            vm.modalSetting.show = true;
                            vm.modalSetting.index = index;
                        }
                    }
                }, '编辑');
            },
            //删除
            deleteButton(vm, h, currentRow, index){
                return h('Poptip', {
                    props: {
                        confirm: true,
                        title: '您确定要删除这条数据吗? ',
                        transfer: true
                    },
                    on: {
                        'on-ok': () => {
                           this.$http.delete(this.$api.user.detele,{id: currentRow.id}).then(function (response) {
                                currentRow.loading = false;
                                if (response.success) {
                                    vm.tableData.splice(index, 1);
                                    vm.$Message.success(response.msg);
                                } else {
                                    vm.$Message.error(response.msg);
                                }
                            });
                        }
                    }
                }, [
                    h('Button', {
                        style: {
                            margin: '0 5px'
                        },
                        props: {
                            size:'small',
                            type: 'error',
                            placement: 'top',
                            loading: currentRow.isDeleting
                        }
                    }, '删除')
                ]);
            },
            //修改状态
            updateSwitch(vm, h, currentRowData, index){
                  return h('i-switch', {
                        attrs: {
                            size: 'large'
                        },
                        props: {
                            'true-value': true,
                            'false-value': false,
                            value: currentRowData.status
                        },
                        on: {
                            'on-change':(status)=> {
                                this.$http.post(this.$api.user.status,{id: currentRowData.id}).then(res=>{
                                    if (res.success) {
                                        vm.$Message.success(res.msg);
                                    } else {
                                        vm.$Message.error(res.msg);
                                    }
                                });
                            }
                        }
                    }, [
                        h('span', {
                            slot: 'open'
                        }, '启用'),
                        h('span', {
                            slot: 'close'
                        }, '禁用')
                    ]);
            },
            //提交数据
            submit () {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        this.modalSetting.loading = true;                     
                         this.$http.post(this.$api.user.save,this.formItem).then(response=>{
                            if (response.success) {
                                this.$Message.success(response.msg);
                            } else {
                                this.$Message.error(response.msg);
                            }
                            this.getList();
                            this.doModel();
                        });
                    }
                });
            },
            //弹出添加框
            doModel(){
                this.modalSetting.show =! this.modalSetting.show;
            },
            //关闭弹框
            doCancel (data) {
                if (!data) {
                    this.formItem.id = 0;
                    this.$refs['myForm'].resetFields();
                    this.modalSetting.loading = false;
                    this.modalSetting.index = 0;
                }
            },
            //当前页
            changePage (page) {
                this.searchConf.pages = page;
                this.getList();
            },
            //显示条数
            changeSize (size) {
                this.searchConf.sizes = size;
                this.getList();
            },
            //搜索查询
            search () {
                this.searchConf.pages = 1;
                this.getList();
            },
            //角色查询
            getAuthList(){
                this.$http.get(this.$api.role.list,{}).then(res=> {
                    if (res.success) {
                        this.authData = res.data;
                    } else this.$Message.error(res.msg);
                });
            },
            //数据信息查询
            getList () {
                this.$http.get(this.$api.user.list,this.searchConf).then(response=>{
                    let res = response;
                    if (res.success) {
                        this.tableData = res.data;
                        this.searchConf.total = res.total
                    } else this.$Message.error(res.msg);
                });
            }
        }
    };
</script>